{#该页面在base.html基础上继承#}
{% extends 'visites/include/base.html' %}
{#引入static文件#}
{% load staticfiles %}
{#对应base.html里block内需要填入的内容#}
{% block content %}
<style type="text/css">
.hidden-input{
    display: none;
}
.hidden-input.active{
    display: block;
}
</style>
<script src="{% static 'visites/js/jquery.min.js' %}"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
    <p hidden="hidden" >{% csrf_token %}</p>
    {#    base.html里的block从topbar之后开始，所以这里我们找到该页面topbar下面对应的标签#}
            <div class="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <div class="card m-b-30 order-detail-panel" id="delivery-point">
                                <div class="card-header">
                                    配送点管理
                                    <span class="right">
                                        <button class="btn btn-info none-radius" data-toggle="modal" data-target="#addCommunity">新增社区</button>
                                        <button class="btn btn-info none-radius" data-toggle="modal" data-target="#addServicePoint">新增配送点</button>
                                    </span>
                                </div>
                                <div class="card-body">
                                    <table class="table" id="point-table">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>社区</th>
                                            <th>配送点</th>
                                            <th>前台状态</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for items in communityList %}
                                            <tr>
                                            {% for point in items.points %}
                                                <tr>
                                                    <th scope="row" ><span class="numberClass"></span></th>
                                                    <td> {{ items.name }}</td>
                                                    <td> {{ point.point_name }}</td>
                                                    <td class="order-status"> {{ point.status }}</td>
                                                    <td><button class="btn btn-dark none-radius btn-control"  data-community="{{ items.id }}"
                                                                data-status="{{ point.status }}" data-name="{{ point.point_name }}"></button> </td>
                                                </tr>
                                            {% endfor %}
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="card m-b-30 order-detail-panel" id="system-account">
                                <div class="card-header">
                                    查单系统账号管理
                                    <span class="right">
                                        <button class="btn btn-info none-radius" data-toggle="modal" data-target="#addUsers">新增账号</button>
                                    </span>
                                </div>
                                <div class="card-body">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>用户名</th>
                                            <th>所在社区</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for items in accountList %}
                                            <tr>
                                            <th scope="row" ><span class="numberClass"></span></th>
                                            <td> {{ items.user_name }}</td>
                                            <td> {{ items.community_id.name }}</td>
                                            <td><button type="button" data-name="{{ items.community_id.name }}" data-user="{{ items.user_name }}" data-accountId="{{ items.id }}"
                                                        data-password="{{ items.password }}" class="btn btn-danger none-radius"  data-toggle="modal" data-target="#modifyPassword">账号密码</button> </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="clearboth"></div>
                    </div>
                </div>
            </div>

<!--modal-->
<!--新增社区-->
<div class="modal fade" id="addCommunity" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <!--<h4 class="modal-title" id="myModalLabel">Modal title</h4>-->
            </div>
            <div class="modal-body">
                <input type="text" placeholder="请输入新增社区名称" class="form-control">
				<span class="text-hide" style="color: red" id="name_warn"> 输入为空！</span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!--新增配送点-->
<div class="modal fade" id="addServicePoint" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <!--<h4 class="modal-title" id="myModalLabel">Modal title</h4>-->
            </div>
            <div class="modal-body">
                <div class="row">
                    <label class="col-sm-4 col-form-label">社区：</label>
                    <label class="col-sm-8">
                        <select class="form-control" id="id2">
                            {% for items in communityList %}
                                <option value="{{ items.id }}">{{ items.name }}</option>
                            {% endfor %}
                        </select>
                    </label>
                </div>
                <div class="row">
                    <label class="col-sm-4 col-form-label">配送点：</label>
                    <label class="col-sm-8">
                        <input type="text" placeholder="请输入新增配送点名称" class="form-control">
						<span class="text-hide" style="color: red" id="point_warn"> 输入为空！</span>
                    </label>
                    </label>
                </div>
                <div class="row">
                    <label class="col-sm-4 col-form-label">详细地址：</label>
                    <label class="col-sm-8">
                        <input type="text" placeholder="请输入新增配送点的详细地址" class="form-control">
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!--新增配送系统账号-->
<div class="modal fade" id="addUsers" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <!--<h4 class="modal-title" id="myModalLabel">Modal title</h4>-->
            </div>
            <div class="modal-body">
                <div class="row">
                    <label class="col-sm-4 col-form-label">所在社区：</label>
                    <label class="col-sm-8">
                        <select class="form-control" id="id1">
                            {% for items in communityList %}
                                <option value="{{ items.id }}">{{ items.name }}</option>
                            {% endfor %}
                        </select>
                    </label>
                </div>
                <div class="row">
                    <label class="col-sm-4 col-form-label">用户名：</label>
                    <label class="col-sm-8">
                        <input type="text" placeholder="请输入用户名" class="form-control user_name">
						<span class="text-hide" style="color: red" id="user_warn"> 用户名不为空！</span>
                    </label>
                </div>
                <div class="row">
                    <label class="col-sm-4 col-form-label">密码：</label>
                    <label class="col-sm-8">
                        <input type="text" placeholder="请输入密码" class="form-control password" id="pw_1">
						<span class="text-hide" style="color: red" id="pw_warn1">密码只能为20位以内的字母、数字或者下划线！</span>
                    </label>
                </div>
                <div class="row">
                    <label class="col-sm-4 col-form-label">确认密码：</label>
                    <label class="col-sm-8">
                        <input type="text" placeholder="请再次输入密码" class="form-control confirm_password" id="pw_2">
                        <span class="text-hide" style="color: red" id="pw_warn">两次输入密码不一致！</span>
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" >保存</button>
            </div>

        </div>
    </div>
</div>
<!--设置密码-->
<div class="modal fade" id="modifyPassword" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <!--<h4 class="modal-title" id="myModalLabel">Modal title</h4>-->
            </div>
            <div class="modal-body">
                <div class="row">
                    <label class="col-sm-4 col-form-label">所在社区：</label>
                    <label class="col-sm-8">
                        <span></span>
                    </label>
                </div>
                <div class="row">
                    <label class="col-sm-4 col-form-label">用户名：</label>
                    <label class="col-sm-8">
                        <span></span>
                    </label>
                </div>
                <div class="row">
                    <label class="col-sm-4 col-form-label">密码：</label>
                    <label class="col-sm-8">
                        <span class="modify-psd"></span>
                        <input type="text" placeholder="" class="form-control password hidden-input" id="pw_3">
						<span class="text-hide" style="color: red" id="pw_warn2">密码只能为20位以内的字母、数字或者下划线！</span>
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<!--js-->
<script>
$(document).ready(function () {

    //增加社区
    $("#addCommunity .btn-primary").click(function () {
        var inputValue = $("#addCommunity .modal-body input").val();
        if(inputValue==""){
            $('#name_warn').removeClass('text-hide');
        }
        else {
            $('#name_warn').addClass('text-hide');
            $.ajax({
            url: '/delivery/addCommunity',
            type: 'POST',
            //dataType: 'json',
            data: {
                name: inputValue
            },
            success: function (result) {
                if (result==1) {
                    window.location.href = '/delivery/listCommunity'
                    }
                }
        });
        }
    });
    // 密码限制 （密码只能为20位以内的字母、数字或者下划线！）
    $('#pw_1').keyup(function () {
            if(!/^[\w|-|]{1,20}$/.test($(this).val())){
                $(this).val('');
                $('#pw_warn1').removeClass('text-hide');
            }
            else {
                $('#pw_warn1').addClass('text-hide');
            }
        });
    //新增配送系统账号
    $("#addUsers .btn-primary").click(function () {
        var pw_1 = $("#pw_1").val();
        var pw_2 = $("#pw_2").val();
        if (pw_1!=pw_2){
            $('#pw_warn').removeClass('text-hide');
        }else {
            $('#pw_warn').addClass('text-hide');
            var community_id = $("#id1").val();
            var user_name = $("#addUsers .modal-body .user_name").val();
            var password = $("#addUsers .modal-body .password").val();
            if(user_name == "") {
                $('#user_warn').removeClass('text-hide');
            }else {

            }
            $.ajax({
                url: '/delivery/addAccount',
                type: 'POST',
                //dataType: 'json',
                data: {
                    community_id: community_id,
                    user_name: user_name,
                    password: password,
                },
                success: function (result) {
                    if (result==1) {
                        window.location.href = '/delivery/listCommunity'
                        }
                    if(result==2){
                    alert("用户名已存在")}
                }
            });
        }
});
    //新增配送点
    $("#addServicePoint .btn-primary").click(function () {

        var community_id = $("#id2").val();
        var point_name = $("#addServicePoint .modal-body").find("input").eq(0).val();
        var point_address = $("#addServicePoint .modal-body").find("input").eq(1).val();
        if (point_name==""){
            $('#point_warn').removeClass('text-hide');
        }else {
            $('#point_warn').addClass('text-hide');
            $.ajax({
                url: '/delivery/addPoint',
                type: 'POST',
                //dataType: 'json',
                data: {
                    community_id: community_id,
                    point_name: point_name,
                    point_address: point_address,
                },
                success: function (result) {
                    if (result==1) {
                        window.location.href = '/delivery/listCommunity'
                        }
                    }
                });
            }
        });
    //前台状态初始设置
    $("#delivery-point .card-body button").each(function(){

        var status = $(this).attr("data-status");
        if(status == '已显示'){
            $(this).removeClass('btn-primary').addClass('btn-dark').html('隐藏');
        }
        else {
            $(this).removeClass('btn-dark').addClass('btn-primary').html('显示');
        }
    });
    //前台状态更新
    $(".btn-control").click(function () {

    if ($(this).hasClass("btn-primary")){
        $(this).removeClass("btn-primary").addClass('btn-dark').html('隐藏');
        $(this).parent().prev(".order-status").html('已显示');

    }
    else {
        $(this).removeClass("btn-dark").addClass('btn-primary').html('显示');
        $(this).parent().prev(".order-status").html('已隐藏');
    }

        var status = $(this).parent().prev(".order-status").text();
        var community_id = $(this).attr("data-community");
        var point_name = $(this).attr("data-name");
        $.ajax({
        url: '/delivery/updateStatus',
        type: 'POST',
        //dataType: 'json',
        data: {
            status: status,
            community_id: community_id,
            point_name:point_name,
        },
    })

});
    //账号密码，重置密码
    var mpih = $("#modifyPassword").html();
    $("#system-account .card-body button").click(function(){
        $("#modifyPassword").html(mpih);
        // 修改密码时的回填
        $(".modify-psd").click(function () {
            $(this).hide();
            $(this).next().addClass("active");
            var _modifyPsdVal = $(this).text();
            $(this).next().val(_modifyPsdVal);
        });
        // 修改密码时的限制
        $('#pw_3').keyup(function () {
            if(!/^[\w|-|]{1,20}$/.test($(this).val())){
                $(this).val('');
                $('#pw_warn2').removeClass('text-hide');
            }
            else {
                $('#pw_warn2').addClass('text-hide');
            }
        });
        var community_name = $(this).attr("data-name");
        var data_user = $(this).attr("data-user");
        var password = $(this).attr("data-password");
        var account_id = $(this).attr("data-accountId");
        $("#modifyPassword .modal-body").find("span").eq(0).html(community_name);
        $("#modifyPassword .modal-body").find("span").eq(1).html(data_user);
        $("#modifyPassword .modal-body").find("span").eq(2).html(password);

        $("#modifyPassword .btn-primary").click(function () {
            var password = $("#pw_3").val();
            $.ajax({
                url: '/delivery/setPassword',
                type: 'POST',
                //dataType: 'json',
                data: {
                    account_id: account_id,
                    password: password,
                },
                success: function (result) {
                        if (result==1) {
                        window.location.href = '/delivery/listCommunity'
                        }
                    }
                })
        })

    });
    // 清除输入框缓存数据
    $("#addCommunity").on("hidden.bs.modal", function () {
            {#$(this).removeData("bs.modal");#}
            {#inputValue = "";#}
            {#console.log("123");#}
            $("#addCommunity .modal-body input").val("");
            $('#name_warn').addClass('text-hide');
        {#else {#}
        {#    $('#name_warn').addClass('text-hide');#}
        });
    $("#addUsers").on("hidden.bs.modal", function () {
            $("#addUsers .modal-body .user_name").val("");
            $("#addUsers .modal-body .password").val("");
            $("#addUsers .modal-body .confirm_password").val("");
            $('#user_warn').addClass('text-hide');
            $('#pw_warn1').addClass('text-hide');
            $('#pw_warn').addClass('text-hide');
        });
    $("#addServicePoint").on("hidden.bs.modal", function () {
            $("#addServicePoint .modal-body input").val("");
            $('#point_warn').addClass('text-hide');
        });
    $("#modifyPassword").on("hidden.bs.modal", function () {
            $("#modifyPassword .modal-body").find("a").val("");
            $("#inline-username").text("");
        });
    //列表序号设置
    function number(){
            for(var i=0;i< $(".numberClass").length;i++){
            $(".numberClass").get(i).innerHTML = i+1;
            }
        }
        number();
    //取页面csrftoken值，避免中间件拒绝
    $.ajaxSetup({
        headers: { "X-CSRFToken": getCookie("csrftoken") }
    });
});
//cookie比对
function getCookie(name) {
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

    if(arr=document.cookie.match(reg))

        return unescape(arr[2]);
    else
        return null;
}

</script>
{# 为了加快前端页面的加载速度我们一般把JS引入写到页面的最底端#}
{% endblock %}
